<template>
  <div class="container">
    <div class="top" ref="top"></div>
    <div class="title">
      <span class="a">珍档荟萃</span>
    </div>
    <div class="content">
      <!-- 跑马灯 -->
      <!-- :interval="4000" -->
      <el-carousel :interval="4000" type="card" height="600px">
        <el-carousel-item v-for="item in carouselData" :key="item.id">
          <div
            class="img"
            :title="item.title"
            :style="{ backgroundImage: 'url(' + item.cover + ')' }"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="bottom" ref="bottom"></div>
  </div>
</template>

<script>
export default {
  props: {
    preciousArchivesData: Array,
  },
  data() {
    return {
      svgs: [
        {
          color: "#c34f3d",
          width: 1920,
          height: 155,
          paths: [
            " M 0.00 155.00  L 1.00 155.00 C 78.23 149.29 160.75 144.32 238.00 139.00 C 315.25 133.68 398.04 128.85 473.00 120.00 C 547.96 111.16 612.36 97.39 683.01 77.01 C 753.66 56.62 817.91 44.14 891.00 31.00 C 964.09 17.87 1048.83 18.27 1122.67 30.33 C 1196.51 42.39 1279.44 53.02 1353.67 40.67 C 1427.90 28.32 1492.22 6.08 1567.00 0.00 L 0.00 0.00 L 0.00 155.00 Z",
            " M 1920.00 73.00  L 1920.00 0.00 L 1611.00 0.00 C 1718.21 6.71 1819.64 39.88 1920.00 73.00 Z",
          ],
          class: "mask",
          pDom: "top",
        },
        {
          color: "#c34f3d",
          width: 1920,
          height: 126,
          paths: [
            " M 0.00 93.00  L 0.00 126.00 L 1920.00 126.00 L 1920.00 29.00 C 1871.85 51.83 1834.52 72.71 1783.77 91.77 C 1733.02 110.83 1671.49 123.00 1614.00 119.00 C 1556.52 115.00 1498.45 104.65 1443.00 91.00 C 1387.55 77.35 1334.77 64.96 1277.00 58.00 C 1219.23 51.04 1148.73 53.01 1092.93 64.93 C 1037.12 76.84 989.53 91.32 934.98 105.98 C 880.42 120.63 813.69 115.91 761.93 98.07 C 710.17 80.24 669.64 62.25 619.77 41.23 C 569.90 20.21 515.83 3.00 461.00 0.00 L 450.00 0.00 C 372.84 4.93 314.76 39.72 243.02 67.02 C 171.29 94.33 79.92 98.94 0.00 93.00 Z",
          ],
          class: "mask",
          pDom: "bottom",
        },
      ],
      carouselData: [],
    };
  },
  watch: {
    preciousArchivesData(newVal) {
      this.carouselData = newVal;
      this.$forceUpdate();
    },
  },
  created() {
    // this.randomPic();
  },
  mounted() {
    this.svgs.forEach((item) => {
      const svgContent = this.$createSvg(item);
      const mask = document.createElement("div");
      mask.className = item.class;
      mask.style.position = "absolute";
      mask.style.top = "0";
      mask.style.left = "0";
      mask.style.right = "0";
      mask.style.bottom = "0";
      mask.style.zIndex = "1";
      mask.innerHTML = svgContent;
      this.$refs[item.pDom].appendChild(mask);
    });
  },
  methods: {
    randomPic() {
      // 随机生成3-6张图片
      let picSum = Math.floor(Math.random() * 4) + 5;
      for (let i = 0; i < picSum; i++) {
        this.carouselData.push({
          id: i + 1,
          img: `https://picsum.photos/1920/780?${i}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #add3eb;
  .top {
    position: relative;
    overflow-x: clip;
    height: 155px;
  }
  .title {
    margin-bottom: 90px;
    .a {
      display: block;
      color: #fff;
      text-align: center;
      width: 160px;
      font-weight: bold;
      border-bottom: 3px solid #c34f3d;
      height: 60px;
      line-height: 60px;
      font-size: 30px;
      margin: 0 auto;
    }
  }
  .content {
    width: 1440px;
    margin: 0 auto;
    padding-bottom: 120px;
    .el-carousel__item {
      border: 10px solid #fff;
    }
    .el-carousel__item .img {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
  .bottom {
    position: relative;
    overflow-x: clip;
    height: 126px;
  }
}
</style>
